<template>
  <!-- Element Plus表单组件 -->
  <el-form
    label-width="96px"
    ref="info_modal_data_ref"
    :model="info_modal.form_data"
    :rules="info_modal.rules"
    size="large"
    v-if="userStore.info_data.auditStatus == 1"
  >
    <!-- 个人信息区域 -->
    <div class="box">
      <h3>人员个人信息</h3>
      <el-form-item label="姓名" prop="studentName">
        <el-input
          v-model.trim="info_modal.form_data.studentName"
          placeholder="请输入姓名"
        />
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="info_modal.form_data.gender" class="ml-4">
          <el-radio label="0" size="large">女</el-radio>
          <el-radio label="1" size="large">男</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="证件照" prop="documentImg">
        <el-text type="info" size="small"
          >本人近 1 年内正面、免冠、无妆、彩色电子证件照（白色 /
          蓝色背景，用于证件照片）</el-text
        >
        <UploadImage v-model="info_modal.form_data.documentImg" />
      </el-form-item>
      <el-form-item label="证件类型" prop="documentType">
        <IdTypeSelect v-model="info_modal.form_data.documentType" />
      </el-form-item>
      <el-form-item label="证件号码" prop="documentNumber">
        <el-input
          v-model="info_modal.form_data.documentNumber"
          placeholder="请输入证件号码"
        />
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input
          v-model="info_modal.form_data.phone"
          placeholder="请输入手机号码"
        />
      </el-form-item>
    </div>
    <div class="box">
      <h3>所属学校与地区</h3>
      <el-form-item label="所属学校" prop="schoolName">
        <el-input
          v-model="info_modal.form_data.schoolName"
          placeholder="请输入所属学校"
        />
      </el-form-item>
      <el-form-item label="所属市区" prop="county">
        <ProvinceSelect
          :isW="true"
          v-model:economize="info_modal.form_data.economize"
          v-model:market="info_modal.form_data.market"
          v-model:county="info_modal.form_data.county"
          :showCounty="true"
        />
      </el-form-item>
    </div>
    <!-- 保存按钮 -->
    <div class="box">
      <el-form-item>
        <el-button
          type="primary"
          size="large"
          @click="handleSubmit"
          :loading="loading"
          color="#1964d6"
          >保存信息</el-button
        >
      </el-form-item>
    </div>
  </el-form>
  <!-- 如果审核状态不是通过，则显示空状态提示 -->
  <el-empty v-else description="审核中或审核未通过，暂不支持使用此功能" />
</template>

<script  setup>
import ProvinceSelect from "@/components/province-select/index.vue"; // 导入省份选择组件
import UploadImage from "@/components/upload-image/index.vue"; // 导入图片上传组件
import { GetStudentInfoApi, PlayerEntryApi } from "@/api/manage/institution"; // 导入用于获取学生信息和提交信息的API函数
import { useUserStore } from "@/store/user"; // 导入Vuex的用户状态管理store
import { ref } from "vue"; // 导入Vue的ref函数，用于创建响应式引用
import { ElMessage } from "element-plus"; // 导入Element Plus的消息提示组件
import IdTypeSelect from "@/components/idtype-select/index.vue"; // 导入证件类型选择组件
import { handleCheckDocumentNumber } from "@/utils/index"; // 导入用于验证证件号码格式的工具函数

// 使用Vue的useUserStore来获取和更新用户状态
const userStore = useUserStore();
const loading = ref(false);
// 定义emit函数，用于触发组件外部的事件
const emit = defineEmits(["sub"]);
const info_modal_data_ref = ref();

// 定义表单验证函数
const checkPhone = (rule, value, callback) => {
  const phoneReg = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
  if (!value) {
    callback(new Error("手机号码不能为空"));
  }
  if (phoneReg.test(value)) {
    callback();
  } else {
    callback(new Error("手机号码格式错误"));
  }
};
const checkName = (rule, value, callback) => {
  const chineseCharactersRegex = /^[\u4e00-\u9fa5]+$/;

  if (!chineseCharactersRegex.test(value)) {
    callback(new Error("请输入中文"));
  } else {
    // Validation passed
    callback();
  }
};
const checkDocumentNumber = (rule, value, callback) => {
  if (!value) {
    callback(new Error("证件号不能为空"));
    return;
  }
  if (!info_modal.value.form_data.documentType) {
    callback(new Error("请选择证件类型"));
    return;
  }
  if (
    !handleCheckDocumentNumber(info_modal.value.form_data.documentType, value)
  ) {
    callback(new Error("证件号格式错误"));
    return;
  }
  callback();
};
/**
 * 信息弹窗数据
 */
const info_modal = ref({
  form_data: {
    gender: "1",
  },
  rules: {
    studentName: [
      {
        required: true,
        validator: checkName,
        trigger: "blur",
      },
    ],
    gender: [
      {
        required: true,
        message: "请选择性别",
        trigger: "blur",
      },
    ],
    documentImg: [
      {
        required: true,
        message: "请上传证件照",
        trigger: "blur",
      },
    ],
    documentType: [
      {
        required: true,
        message: "请选择证件类型",
        trigger: "blur",
      },
    ],
    documentNumber: [
      {
        required: true,
        validator: checkDocumentNumber,
        trigger: "blur",
      },
    ],
    phone: [
      {
        required: true,
        validator: checkPhone,
        trigger: "blur",
      },
    ],
    schoolName: [
      {
        required: true,
        message: "请输入所属学校",
        trigger: "blur",
      },
    ],
    county: [
      {
        required: true,
        message: "请选择所属市区",
        trigger: "blur",
      },
    ],
  },
});
const handleRest = () => {
  info_modal.value.form_data = {
    gender: "1",
  };
};
/**
 * 获取学生信息
 */
const handleGetInfo = async (row) => {
  let res = await GetStudentInfoApi({
    studentId: row.studentId,
  });
  if (res.success) {
    info_modal.value.form_data = res.entity;
  }
};

/**
 * 保存信息
 */
const handleSubmit = () => {
  info_modal_data_ref.value.validate(async (r) => {
    if (!r) {
      return;
    }
    loading.value = true;
    let res;
    console.log(info_modal.value.form_data);
    const newinfo_modal = {
      ...info_modal.value.form_data,
      playerEntry: userStore.info_data.userId,
    };
    console.log(newinfo_modal);
    res = await PlayerEntryApi(newinfo_modal);
    if (res.success) {
      ElMessage.success(res.message);
      emit("sub", res);
    } else {
      ElMessage.error(res.message);
    }
    loading.value = false;
  });
};
// 将handleGetInfo和handleRest函数暴露给组件外部
defineExpose({
  handleGetInfo,
  handleRest,
});
</script>

<style lang="scss" scoped>
.box {
  padding-bottom: 32px;
  padding-left: 32px;
  width: 640px;
  h3 {
    margin-bottom: 16px;
  }
}
</style>